<template>
    <div id="app">
      <h1>设备详情表</h1>
      
      <table >
        <tr>
          <th>标准编码</th>
          <th>润消部位</th>
          <th>油脂型号</th>
          <th>基准日期</th>
          <th>专业</th>
          <th>执行部门</th>
          <th>设备编码</th>
          <th>润滑方式</th>
          <th>周期</th>
          <th>实施方</th>
          <th>标淮性质</th>
          <th>设备名称</th>
          <th>油量</th>
          <th>给油脂类型</th>
          <th>执行岗位代码</th>
          <th>给油分类</th>
        </tr>
        <tr v-for="(item, index) in deviceData" :key="index">
          <td>{{ item.id}}</td>
          <td>{{ item.lubricationPart }}</td>
          <td>{{ item.oilType }}</td>
          <td>{{ item.baseDate}}</td>
          <td>{{ item.equipmentMajor}}</td>
          <td>{{ item.implementUnit }}</td>
          <td>{{ item.equipmentId}}</td>
          <td>{{ item.lubricationMethod}}</td>
          <td>{{ item.cycle }}</td>
          <td>{{ item.implementUnit}}</td>
          <td>{{ item.standard}}</td>
          <td>{{ item.equipmentName}}</td>
          <td>{{ item.oilAmount }}</td>
          <td>{{ item.oilSupplyType}}</td>
          <td>{{ item.executionPositionCode }}</td>
          <td>{{ item.type}}</td>
        </tr>
      </table>
    </div>
  </template>
  <script>
  import axios from "axios";
  
  export default {
  name: "PreserveDetail",
  props: {
    id: {
      type: String,
      required: true
    },
  },
  data() {
    return { // 添加 loading 状态
      deviceData: {} // 更改为 deviceData，与你的模版结构更相符
    };
  },
  mounted() {
    const id = this.$route.params.id ;
    this.getData(id);
  },
  methods: {
    getData(id) {
      axios.get(`http://localhost:9527/repair/getRepairById/${id}`).then(res => {
           this.deviceData = res.data;
        })
        .catch(err => console.log(err));
    },
  }
}
  
</script>
<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

th {
  background-color: #409EFF;
  color: white;
  border: 1px solid #ddd;
  padding: 10px 15px;
  text-align: left;
}

td {
  border: 1px solid #ddd;
  text-align: left;
  padding: 10px 15px;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

tr:hover {
  background-color: #ddd;
  cursor: pointer;
}

h1 {
  text-align: center;
  color: #333;
  padding: 20px 0;
}

div[v-if="loading"] {
  text-align: center;
  font-size: 20px;
  color: #666;
}
</style>

  